<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<rich:panel>
			<a4j:queue requestDelay="#{queueBean.requestDelay}"
				ignoreDupResponses="#{queueBean.ignoreDupResponces}" /> 
		<h:form id="form">
			<h:panelGrid columns="1" width="100%">
				<h:panelGrid columns="2">
					<h:outputText value="Type here:" />
					<h:inputText id="myinput" value="#{queueBean.text}"
						onkeyup="addEvent();"
						disabled="#{not (facesContext.maximumSeverity==null)}">
						<a4j:ajax onbegin="addRequest();" event="keyup" render="outtext"
							oncomplete="printCounts()" onbeforedomupdate="addUpdate()" />
					</h:inputText>
					<h:outputText value="Repeated text:" />
					<h:outputText value="#{queueBean.text}" id="outtext"
						style="font-weight:bold;" />
					<h:outputText value="Events count:" />
					<h:outputText value="0" id="events" />
					<h:outputText value="Requests count:" />
					<h:outputText value="0" id="requests" />
					<h:outputText value="DOM updates count:" />
					<h:outputText value="0" id="updates" />
				</h:panelGrid>
				<rich:message for="form:delay" style="color:red;" />
				<h:panelGrid columns="2">
					<h:outputText value="Request delay:" />
					<h:inputText value="#{queueBean.requestDelay}" id="delay"
						converterMessage="Delay field should be a number (Demo input disabled till this resolved)">
						<f:convertNumber integerOnly="true" />
					</h:inputText>
					<h:outputText value="Ignore Duplicated Responces" />
					<h:selectBooleanCheckbox value="#{queueBean.ignoreDupResponces}" />
					<f:facet name="footer">
						<h:commandButton value="Apply" action="#{queueBean.resetText}" />
					</f:facet>
				</h:panelGrid>
			</h:panelGrid>
		</h:form>
	</rich:panel>
	<script type="text/javascript">
		var events = 0;
		var updates = 0;
		var outEvents = #{rich:element('events')};
		var outUpdates = #{rich:element('updates')};
		var outRequests = #{rich:element('requests')};
		
		var requests=0;
		function addEvent(){
			events++;
		}
		function addUpdate(){
			updates++; 
		}
		function addRequest(){
			requests++;
		}

		function printCounts(){
			outEvents.innerHTML=events;
			outUpdates.innerHTML=updates;
			outRequests.innerHTML=requests;
		}
	</script>
</ui:composition>